<template>
	<view class="home">
		<u-navbar title="中新汇算管理端" :border-bottom="false" :is-back="false"></u-navbar>
		<view class="header" @click="set">
			<view class="l">
				<img :src="user.avatar" alt="" class="img" />
				{{ user.real_name }}·{{
					user.type === 1 ? '站长' : user.type === 2 ? '合伙人' : user.type === 3 ? '品鉴推介师' : user.type === 4 ? '供应商' : user.type === 5 ? '实体门店' : ''
				}}
			</view>
			<view class="r"><u-icon name="arrow-right"></u-icon></view>
		</view>
		<view class="msg">
			<view class="g1" v-if="user.type === 1">今日订单数</view>
			<view class="g1" v-if="user.type === 4">今日订单{{ info.t_nums }}笔</view>
			<view class="g1" v-if="user.type === 2 || user.type === 3">今日推广订单数</view>
			<view class="g2">{{ user.type === 4 ? info.t_money : info.t_nums }}</view>
			<view class="g3">
				<view class="it" v-if="user.type === 4" @click="supplyOrder">
					<img src="../../static/time.png" alt="" />
					订单数据
				</view>
				<!-- <view class="it it2" v-if="user.type === 4" @click="Withdrawal(1)">
					<img src="../../static/lingdang.png" alt="" />
					提现
				</view> -->
				<view class="it" v-if="user.type === 1" @click="extensionOrder2">
					<img src="../../static/time.png" alt="" />
					订单记录
				</view>
				<view class="it" v-if="user.type === 2" @click="record">
					<img src="../../static/time.png" alt="" />
					流水明细
				</view>
				<view class="it it2" v-if="user.type === 2" @click="Withdrawal(2)">
					<img src="../../static/lingdang.png" alt="" />
					分润提现
				</view>
				<view class="it" v-if="user.type === 3" @click="extensionOrder">
					<img src="../../static/time.png" alt="" />
					推广订单
				</view>
				<view class="it it2" v-if="user.type === 3" @click="Withdrawal(2)">
					<img src="../../static/lingdang.png" alt="" />
					佣金提现
				</view>
			</view>
		</view>
		<view class="q">
			<view class="q_title">常用功能</view>
			<view class="itemBox">
				<view v-if="user.type === 4" class="item" @click="shop_Administration">
					<img src="../../static/t1.png" alt="" class="img" />
					<view>商品管理</view>
				</view>
				<view v-if="user.type === 4" class="item" @click="advertisement">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>广告投放</view>
				</view>
				<view v-if="user.type === 4" class="item" @click="advertisement_order">
					<img src="../../static/t3.png" alt="" class="img" />
					<view>广告订单</view>
				</view>
				<view v-if="user.type === 1" class="item" @click="fwz_shop">
					<img src="../../static/t1.png" alt="" class="img" />
					<view>商品管理</view>
				</view>
				<view v-if="user.type === 1" class="item" @click="HxCode(2)">
					<img src="../../static/t2.png" alt="" class="img" />
					<view>核销二维码</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="supplierList">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>供应商列表</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="productsList">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>选品列表</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="recommendMaster">
					<img src="../../static/t3.png" alt="" class="img" />
					<view>品鉴推介师</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="QdCode(1)">
					<img src="../../static/t3.png" alt="" class="img" />
					<view>推广二维码</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="record">
					<img src="../../static/t3.png" alt="" class="img" />
					<view>推广分润</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="partnerOrder">
					<img src="../../static/t3.png" alt="" class="img" />
					<view>订单管理</view>
				</view>
				<view v-if="user.type === 3" class="item" @click="shopList">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>商品分享</view>
				</view>
				<view v-if="user.type === 2" class="item" @click="shopList">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>商品分享</view>
				</view>
				<view v-if="user.type === 3" class="item" @click="record">
					<img src="../../static/t4.png" alt="" class="img" />
					<view>流水明细</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="pt_box">
				<view class="">
					<lyz-canvas :board="canvasImage" :isRenderImage="true" @success="success" :customStyle="'margin:auto'"></lyz-canvas>
				</view>
				<view class="bt" @click="preservation">保存图片</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { configshop, getFwz, wxyaoqingma, saomaHxCode, nowDayCount } from '../../libs/axios.js';
import lyzCanvas from '@/components/lyz-canvas/lyz-canvas.vue';
export default {
	data() {
		return {
			// 1供应商 2服务站 3合伙人 4品鉴推荐师
			active: 4,
			show: false,
			user: {
				avatar: '',
				real_name: ''
			},
			state: {},
			url: '',
			canvasImage: {},
			info: {}
		};
	},
	components: {
		lyzCanvas
	},
	onReady() {
		// const context = uni.createCanvasContext('canvasId', this);
		// context.fillRect(100, 100, 100, 100);
	},
	onShow() {
		this.getInfo();
		this.getnowDayCount();
	},
	methods: {
		extensionOrder2() {
			uni.navigateTo({
				url: '/pages/extensionOrder2/extensionOrder2'
			});
		},
		fwz_shop() {
			uni.navigateTo({
				url: '/pages/fwz_shop/fwz_shop'
			});
		},
		extensionOrder() {
			uni.navigateTo({
				url: '/pages/extensionOrder/extensionOrder'
			});
		},
		async getnowDayCount() {
			let info = await nowDayCount();
			this.info = info.data;
		},
		Withdrawal(index) {
			uni.navigateTo({
				url: '/pages/Withdrawal/Withdrawal?index=' + index + '&total_money=' + this.info.total_money
			});
		},
		record() {
			uni.navigateTo({
				url: '/pages/record/record'
			});
		},

		supplyOrder() {
			uni.navigateTo({
				url: '/pages/supplyOrder/supplyOrder'
			});
		},
		advertisement() {
			uni.navigateTo({
				url: '/pages/advertisement/advertisement'
			});
		},
		advertisement_order() {
			uni.navigateTo({
				url: '/pages/advertisement_order/advertisement_order'
			});
		},

		partnerOrder() {
			uni.navigateTo({
				url: '/pages/partnerOrder/partnerOrder'
			});
		},
		async getwxinfo(index) {
			uni.showLoading({
				title: '邀请码生成中...'
			});
			let info2;
			let title = '';
			if (index === 1) {
				info2 = await wxyaoqingma();
				title = '微信扫一扫加入品鉴推介师';
			} else {
				info2 = await saomaHxCode();
				title = '微信扫一扫核销';
			}

			let a = info2.data.split('');
			a.shift();
			a = a.join('');
			let c = 'https://csapi.yingshishequ.com' + a;
			console.log(c);
			let d = this.user.real_name;
			let e =
				this.user.type === 1
					? '站长'
					: this.user.type === 2
					? '合伙人'
					: this.user.type === 3
					? '品鉴推介师'
					: this.user.type === 4
					? '供应商'
					: this.user.type === 5
					? '实体门店'
					: '';
			if (index === 1) {
			} else {
				let info3 = await getFwz();
				info3.data.forEach((item) => {
					if (item.id === this.user.fwz_id) {
						d = item.title;
					}
				});
				e = '服务站';
				title = '微信扫一扫核销';
			}
			this.canvasImage = {
				width: '650rpx',
				height: '800rpx',
				background: '#f8f8f8',
				views: [
					{
						type: 'text',
						text: title,
						css: {
							width: '600rpx',
							top: '92rpx',
							left: '25rpx',
							rotate: '0',
							textAlign: 'center',
							radius: '',
							borderWidth: '',
							borderColor: '#000000',
							shadow: '',
							padding: '0rpx',
							fontSize: '40rpx',
							fontWeight: 'normal',
							maxLines: '1',
							lineHeight: '59.94rpx',
							textStyle: 'fill',
							textDecoration: 'none',
							fontFamily: ''
						}
					},
					{
						type: 'image',
						url: c,
						css: {
							width: '300rpx',
							height: '300rpx',
							top: '170rpx',
							left: '175rpx',
							rotate: '0',
							radius: '',
							borderWidth: '',
							borderColor: '#000000',
							shadow: '',
							mode: 'scaleToFill'
						}
					},
					{
						type: 'text',
						text: d + '·' + e,
						css: {
							width: '600rpx',
							top: '520rpx',
							left: '25rpx',
							rotate: '0',
							textAlign: 'center',
							radius: '',
							borderWidth: '',
							borderColor: '#000000',
							shadow: '',
							padding: '0rpx',
							fontSize: '32rpx',
							fontWeight: 'normal',
							maxLines: '1',
							lineHeight: '59.94rpx',
							textStyle: 'fill',
							textDecoration: 'none',
							fontFamily: ''
						}
					},
					{
						type: 'text',
						text: '中新汇算管理端 |  微信小程序',
						css: {
							width: '600rpx',
							top: '600rpx',
							left: '25rpx',
							rotate: '0',
							textAlign: 'center',
							radius: '',
							borderWidth: '',
							borderColor: '#000000',
							shadow: '',
							padding: '0rpx',
							fontSize: '32rpx',
							fontWeight: 'normal',
							maxLines: '1',
							lineHeight: '59.94rpx',
							textStyle: 'fill',
							textDecoration: 'none',
							fontFamily: ''
						}
					}
				]
			};
			uni.hideLoading();
		},
		success(e) {
			this.url = e;
		},
		supplierList() {
			uni.navigateTo({
				url: '/pages/supplierList/supplierList'
			});
		},
		shopList() {
			uni.navigateTo({
				url: '/pages/shopList/shopList'
			});
		},
		productsList() {
			uni.navigateTo({
				url: '/pages/productsList/productsList'
			});
		},
		recommendMaster() {
			uni.navigateTo({
				url: '/pages/recommendMaster/recommendMaster'
			});
		},
		shop_Administration() {
			uni.navigateTo({
				url: '/pages/shop_Administration/shop_Administration'
			});
		},
		set() {
			uni.navigateTo({
				url: '/pages/set/set'
			});
		},
		async getInfo() {
			let info = await configshop();
			uni.setStorageSync('ShopInfo', info.data);
			let c = uni.getStorageSync('user');
			console.log(this.user);
			if (c) {
				this.user = c;
				this.user.avatar = this.$store.state.imgUrl + this.user.avatar;
			} else {
				this.user.avatar = this.$store.state.imgUrl + '20200813152728.png';
				this.user.real_name = '游客';
			}
			this.$store.state.imgUrl = info.data.domain_img;
			this.$store.state.scope_img = info.data.qiniu_bucket;
		},
		QdCode() {
			this.show = true;
			this.getwxinfo(1);
		},
		HxCode() {
			this.show = true;
			this.getwxinfo(2);
		},
		preservation() {
			const _this = this;
			uni.getSetting({
				success(res) {
					console.log(res);
					if (!res.authSetting['writePhotosAlbum']) {
						console.log('相机权限未开启');
						// 尝试拉起权限
						uni.showModal({
							title: '提示',
							content: '保存图片失败，未开启授权, 请问是否开启授权保存图片？',
							success(res) {
								if (res.confirm) {
									// 点击确定按钮，尝试拉起权限
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success() {
											uni.saveImageToPhotosAlbum({
												//保存图片到系统相册。
												filePath: _this.url, //图片文件路径
												success: function () {
													uni.showToast({
														title: '图片保存成功',
														icon: 'none'
													});
												},
												fail: function (e) {
													console.log(e);
													uni.showToast({
														title: '图片保存失败',
														icon: 'none'
													});
												}
											});
										},
										fail(err) {
											console.log(err);
										}
									});
								}
							}
						});
					} else {
						uni.saveImageToPhotosAlbum({
							//保存图片到系统相册。
							filePath: _this.url, //图片文件路径
							success: function () {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								});
							},
							fail: function (e) {
								console.log(e);
								uni.showToast({
									title: '图片保存失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.home {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	::v-deep .u-mode-center-box {
		background-color: transparent !important;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6rpx 48rpx;
		box-sizing: border-box;
		.l {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.img {
				width: 108rpx;
				height: 108rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}
		}
	}
	.msg {
		width: 686rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(209, 57, 45, 1);
		box-shadow: 0rpx 4rpx 20rpx rgba(190, 46, 35, 0.1);
		margin: 20rpx auto 0 auto;
		.g1 {
			padding-top: 60rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.g2 {
			font-size: 56rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			margin-top: 48rpx;
			text-align: center;
		}
		.g3 {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
			padding-bottom: 60rpx;
			.it {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 4rpx;
				}
			}
			.it2 {
				margin-left: 66rpx;
			}
		}
	}
	.q {
		margin: 48rpx auto 0 auto;
		width: 686rpx;
		.q_title {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.itemBox {
			margin-top: 30rpx;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 30rpx;
			.item {
				width: 25%;
				text-align: center;
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				width: 25%;
				margin-bottom: 20px;
				.img {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.pt_box {
		.t {
			width: 630rpx;
			height: 780rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			border: 10rpx solid rgba(255, 67, 73, 1);
			padding-top: 40rpx;
			text-align: center;
			.t1 {
				font-size: 48rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.t2 {
				margin-top: 70rpx;
				width: 320rpx;
				height: 320rpx;
			}
			.t3 {
				margin-top: 24rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.t4 {
				margin-top: 88rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
}
</style>
